<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>培训门户</title>
    <link rel="stylesheet" href="/lims/layui/css/layui.css?20190817.1">
    <link rel="stylesheet" href="/lims/css/common.css">
    <link rel="stylesheet" href="/lims/css/pad/topTab.css?20190827.1">
    <link rel="stylesheet" href="/lims/lib/swiper/css/swiper.min.css?20190830.1">
    <script src="/lims/layui/layui.js"></script>
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/lims/js/pad/topTab.js?20190827.3"></script>
    <style>
        html,body{
            width:100%;
            height: 100%;
        }
        .container{
            width:100%;
            margin:0 auto;
            height:100%;
        }
        .leftBox{
            width:70%;
            float:left;
        }
        .leftBox img{
           width:100%;
            height:300px;
        }
        .rightBox{
            width:27%;
            float:right;
            background: #fff;
            height:300px;
        }
        .title{
            font-size:20px;
            text-align: center;
            font-weight: bold;
            height:40px;
            line-height: 40px;
        }
        .list li{
            height: 30px;
            line-height: 30px;
            padding-left:20px;
        }
        .lText{
            width:49%;
            float:left;
            border-right:1px solid #eee;
            text-align: center;
            margin: 10px 0px 20px 0px;
        }
        .RText{
            width:49%;
            float:left;
            text-align: center;
            margin: 10px 0px 20px 0px;
        }
        .num{
            font-size: 30px;
            color: red;
        }
        .layui-card{
            overflow: auto;
            float:left;
            width:20%;
            height: auto;
            margin-right:20px;
        }
        .layui-card p{
            margin:5px 0px;
        }
        .layui-card img{
            width:100%;
        }


    </style>
</head>
<body>
<div class="container">
    <div class="wrapTop" style="padding:10px;height: 300px;">
        <div class="leftBox">
            <img src="/img/JDProject/swiper.png" alt="">
        </div>
        <div class="rightBox">
            <div class="title">我的课程信息</div>
            <div>
                <div class="lText">
                    <div class="num">21</div>
                    <div>正在学习</div>
                </div>
                <div class="RText">
                    <div class="num">19</div>
                    <div>已学习</div>
                </div>
            </div>
            <div style="font-size: 18px;padding-left: 20px;padding-top:10px;">
                常用知识库文件
            </div>
            <ul class="list">

            </ul>
        </div>
    </div>
    <div class="wrapBot" style="padding:10px;">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">全部</li>
                <li>必修课</li>
                <li>选修课</li>

            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-card" >
                        <img src="/img/train/timg.jpg" >
                        <p>项目管理公开课</p>
                        <p style="color: gray;margin-top: 0px">最近学习时间：2019-09-06 16：00</p>
                    </div>
                    <div class="layui-card" >
                        <img src="/img/train/timg.jpg" >
                        <p>项目管理公开课</p>
                        <p style="color: gray;margin-top: 0px">最近学习时间：2019-09-06 16：00</p>
                    </div>
                    <div class="layui-card" >
                        <img src="/img/train/timg.jpg">
                        <p>项目管理公开课</p>
                        <p style="color: gray;margin-top: 0px">最近学习时间：2019-09-06 16：00</p>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <div class="layui-card" >
                        <img src="/img/train/timg.jpg" >
                        <p>项目管理公开课</p>
                        <p style="color: gray;margin-top: 0px">最近学习时间：2019-09-06 16：00</p>
                    </div>
                    <div class="layui-card" >
                        <img src="/img/train/timg.jpg" >
                        <p>项目管理公开课</p>
                        <p style="color: gray;margin-top: 0px">最近学习时间：2019-09-06 16：00</p>
                    </div>
                    <div class="layui-card" >
                        <img src="/img/train/timg.jpg">
                        <p>项目管理公开课</p>
                        <p style="color: gray;margin-top: 0px">最近学习时间：2019-09-06 16：00</p>
                    </div>
                    <div class="layui-card" >
                        <img src="/img/train/timg.jpg">
                        <p>项目管理公开课</p>
                        <p style="color: gray;margin-top: 0px">最近学习时间：2019-09-06 16：00</p>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-card" >
                        <img src="/img/train/timg.jpg" >
                        <p>项目管理公开课</p>
                        <p style="color: gray;margin-top: 10px">最近学习时间：2019-09-06 16：00</p>
                    </div>
                    <div class="layui-card" >
                        <img src="/img/train/timg.jpg" >
                        <p>项目管理公开课</p>
                        <p style="color: gray;margin-top: 10px">最近学习时间：2019-09-06 16：00</p>
                    </div>
                    <div class="layui-card" >
                        <img src="/img/train/timg.jpg">
                        <p>项目管理公开课</p>
                        <p style="color: gray;margin-top: 10px">最近学习时间：2019-09-06 16：00</p>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<script>
    layui.use(['element'], function(){
        var form = layui.form;
        var layer = layui.layui;

    });

    $.ajax({
        url:'/newFileContent/getContentById',
        data:{
            sortId: 1,
            page: 1,
            pageSize: 10,
            useFlag: false,
            sortType: 5
        },
        type:'get',
        success:function(ress){
            var str2=''
            if(ress.flag){
                var datas = ress.object.contentList;
                if(datas.length>0){
                    for(var j=0;j<datas.length;j++){
                        str2 +=' <li><span style="color:#fff;padding: 1px 5px;'+function(){
                            if(j==0){
                                return 'background:#ff4400'
                            }else if(j==1){
                                return 'background:#ff7700'
                            }else if(j==2){
                                return 'background:#ffaa00'
                            }else{
                                return 'background:#cccccc'
                            }
                        }()+'">'+(j+1)+'</span><a href="/newFilePub/fileDetail?contentId='+datas[j].contentId+'&sortId='+datas[j].sortId+'" target="_blank">'+datas[j].subject+'</a></li>'
                    }
                }else{
                    str2 = ' <li>暂无数据</li>'
                }
                $('.list').html(str2)
            }
        }
    })

</script>
</body>
</html>